import React, { useState } from "react";
import style from './style.module.scss'
import url from '../../../assets/images/icon/common resource/hdpi/common_icon_back_black_n.png'
import { useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../../store/hooks";
import { addpatientCircleSearchList } from "../../../store/user/userSlice";
const Index: React.FC = () => {
  const [value, setValue] = useState('')
  const dispatch = useAppDispatch();
  const navigate = useNavigate()
  const searchList = useAppSelector((state) => state.user.patientCircleSearchList);
  const handleSearch=()=>{
    if (value!== "") {
      dispatch(addpatientCircleSearchList(value));
    }
    navigate('/patient/circle/search/result', {
      state: {
        value
      }
    })  
  }
  return <div>
    <div className={style.navbar}>
      <img src={url} alt="" onClick={()=>{
        navigate(-1)
      }}/>
      <input type="text" value={value} onChange={(e) => {
        setValue(e.target.value)
      }} />
      <button onClick={() => {
       handleSearch()
      }}
      onKeyDown={(e)=>{
        if (e.keyCode===13) {
          handleSearch()
        }
      }}
      >搜索</button>
    </div>
    <div className={style.content}>
      <div className={style.history}>
        <p className={style.title}>搜索历史</p>
        <ul>
          {searchList.map((item,ind)=>{
              return <li key={ind}>{item}</li>
            })}
        </ul>
      </div>
    </div>
  </div>;
};

export default Index;
